@abcagency/hc-ui-components 1.9.37 → 1.9.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/modules/filter/commute.js +3 -0
- package/dist/components/modules/filter/commute.js.map +1 -1
- package/dist/components/modules/filter/item.js +1 -0
- package/dist/components/modules/filter/item.js.map +1 -1
- package/dist/components/modules/filter/search.js +5 -1
- package/dist/components/modules/filter/search.js.map +1 -1
- package/dist/components/modules/list/item-list.js +1 -1
- package/dist/components/modules/list/item-list.js.map +1 -1
- package/package.json +1 -1
- package/src/components/modules/filter/commute.js +3 -0
- package/src/components/modules/filter/item.js +1 -0
- package/src/components/modules/filter/search.js +4 -0
- package/src/components/modules/list/item-list.tsx +7 -3
|
@@ -24,6 +24,7 @@ var FilterCommute = function FilterCommute(_ref) {
|
|
|
24
24
|
className: "relative ".concat(className !== null && className !== void 0 ? className : "")
|
|
25
25
|
}, /*#__PURE__*/React__default.createElement("label", {
|
|
26
26
|
htmlFor: "commute",
|
|
27
|
+
id: "commute-label",
|
|
27
28
|
className: "hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
|
|
28
29
|
}, /*#__PURE__*/React__default.createElement(IconContained, {
|
|
29
30
|
icon: "ri:pin-distance-fill",
|
|
@@ -39,6 +40,8 @@ var FilterCommute = function FilterCommute(_ref) {
|
|
|
39
40
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
40
41
|
className: "hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none"
|
|
41
42
|
}, /*#__PURE__*/React__default.createElement(qt.Input, {
|
|
43
|
+
id: "commute",
|
|
44
|
+
"aria-labelledby": "commute-label",
|
|
42
45
|
className: "hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400",
|
|
43
46
|
onChange: function onChange(e) {
|
|
44
47
|
setCommuteLocation("");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"commute.js","sources":["../../../../src/components/modules/filter/commute.js"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Combobox, Transition } from '@headlessui/react';\n\nimport Button from '~/components/modules/buttons/default';\nimport Icon from \"~/components/modules/icon\";\n\nconst FilterCommute = ({\n\tclassName,\n\tready,\n\tstatus,\n\tdata,\n\tselected,\n\tisCurrentLocation,\n\tinputRef,\n\thandleSelect,\n\tsetValue,\n\tsetSelected,\n\tclearSuggestions,\n\tcommuteLocation,\n\tsetIsCurrentLocation,\n\tfetchLocation,\n\tsetCommuteLocation\n}) => {\n\treturn (\n\t\t<div className={`relative ${className ?? \"\"}`}>\n\t\t\t<label\n\t\t\t\thtmlFor=\"commute\"\n\t\t\t\tclassName=\"hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText\"\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon=\"ri:pin-distance-fill\"\n\t\t\t\t\tsize=\"hc-size-5\"\n\t\t\t\t\tclassName=\"hc-text-uiAccent/30\"\n\t\t\t\t/>\n\t\t\t\t<span>\n\t\t\t\t\t<span className=\"md:hc-hidden lg:hc-inline\">Calculate your</span> commute\n\t\t\t\t</span>\n\t\t\t</label>\n\n\t\t\t<Combobox value={selected} onChange={handleSelect}>\n\t\t\t\t<div className=\"hc-relative hc-mt-1\">\n\t\t\t\t\t<div className=\"hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none\">\n\t\t\t\t\t\t<Combobox.Input\n\t\t\t\t\t\t\tclassName=\"hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400\"\n\t\t\t\t\t\t\tonChange={e => {\n\t\t\t\t\t\t\t\tsetCommuteLocation(\"\");\n\t\t\t\t\t\t\t\tsetValue(e.target.value);\n\t\t\t\t\t\t\t\tsetSelected(e.target.value);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={selected}\n\t\t\t\t\t\t\tdisabled={!ready}\n\t\t\t\t\t\t\tplaceholder=\"Starting point\"\n\t\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button.Btn\n\t\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\t\tsize=\"sqsm\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetIsCurrentLocation(!isCurrentLocation);\n\t\t\t\t\t\t\t\tlocalStorage.setItem('isCurrentLocation', !isCurrentLocation);\n\t\t\t\t\t\t\t\tif (isCurrentLocation || commuteLocation) {\n\t\t\t\t\t\t\t\t\tsetCommuteLocation(\"\");\n\t\t\t\t\t\t\t\t\tsetSelected(\"\");\n\t\t\t\t\t\t\t\t} else if (!commuteLocation) { fetchLocation(); }\n\t\t\t\t\t\t\t}}\n\n\t\t\t\t\t\t\tclassName=\"\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"hc-sr-only\">Use your location</span>\n\t\t\t\t\t\t\t{commuteLocation ? <Icon icon=\"mdi:times\"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon=\"mdi:my-location\" />}\n\t\t\t\t\t\t</Button.Btn>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Transition\n\t\t\t\t\t\tas={Fragment}\n\t\t\t\t\t\tleave=\"hc-transition hc-ease-in hc-duration-100\"\n\t\t\t\t\t\tleaveFrom=\"hc-opacity-100\"\n\t\t\t\t\t\tleaveTo=\"hc-opacity-0\"\n\t\t\t\t\t\tafterLeave={clearSuggestions}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Combobox.Options className=\"hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm\">\n\t\t\t\t\t\t\t{status === \"OK\" &&\n\t\t\t\t\t\t\t\tdata.map(data => (\n\t\t\t\t\t\t\t\t\t<Combobox.Option\n\t\t\t\t\t\t\t\t\t\tkey={data.place_id}\n\t\t\t\t\t\t\t\t\t\tvalue={data.description}\n\t\t\t\t\t\t\t\t\t\tclassName={({ active }) =>\n\t\t\t\t\t\t\t\t\t\t\t`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? \"hc-bg-primary hc-text-white\" : \"hc-text-uiText\"\n\t\t\t\t\t\t\t\t\t\t\t}`\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{({ selected }) => (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={`hc-block hc-truncate ${selected ? \"hc-font-bold\" : \"hc-font-medium\"}`}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{data.description}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</Combobox.Option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Combobox.Options>\n\t\t\t\t\t</Transition>\n\t\t\t\t</div>\n\t\t\t</Combobox>\n\t\t</div>\n\t);\n};\n\nexport default FilterCommute;\n"],"names":["FilterCommute","_ref","className","ready","status","data","selected","isCurrentLocation","inputRef","handleSelect","setValue","setSelected","clearSuggestions","commuteLocation","setIsCurrentLocation","fetchLocation","setCommuteLocation","React","createElement","concat","htmlFor","Icon","icon","size","Combobox","value","onChange","Input","e","target","disabled","placeholder","ref","Button","Btn","variant","onClick","localStorage","setItem","Transition","as","Fragment","leave","leaveFrom","leaveTo","afterLeave","Options","map","Option","key","place_id","description","_ref2","active","_ref3"],"mappings":";;;;;;AAMA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAgBb;AAAA,EAAA,IAfLC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IACJC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,iBAAiB,GAAAN,IAAA,CAAjBM,iBAAiB;IACjBC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,gBAAgB,GAAAX,IAAA,CAAhBW,gBAAgB;IAChBC,eAAe,GAAAZ,IAAA,CAAfY,eAAe;IACfC,oBAAoB,GAAAb,IAAA,CAApBa,oBAAoB;IACpBC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,kBAAkB,GAAAf,IAAA,CAAlBe,kBAAkB,CAAA;EAElB,oBACCC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKhB,SAAS,EAAA,WAAA,CAAAiB,MAAA,CAAcjB,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAI,EAAE,CAAA;GAC1Ce,eAAAA,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACCE,IAAAA,OAAO,EAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"commute.js","sources":["../../../../src/components/modules/filter/commute.js"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Combobox, Transition } from '@headlessui/react';\n\nimport Button from '~/components/modules/buttons/default';\nimport Icon from \"~/components/modules/icon\";\n\nconst FilterCommute = ({\n\tclassName,\n\tready,\n\tstatus,\n\tdata,\n\tselected,\n\tisCurrentLocation,\n\tinputRef,\n\thandleSelect,\n\tsetValue,\n\tsetSelected,\n\tclearSuggestions,\n\tcommuteLocation,\n\tsetIsCurrentLocation,\n\tfetchLocation,\n\tsetCommuteLocation\n}) => {\n\treturn (\n\t\t<div className={`relative ${className ?? \"\"}`}>\n\t\t\t<label\n\t\t\t\thtmlFor=\"commute\"\n\t\t\t\tid=\"commute-label\"\n\t\t\t\tclassName=\"hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText\"\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon=\"ri:pin-distance-fill\"\n\t\t\t\t\tsize=\"hc-size-5\"\n\t\t\t\t\tclassName=\"hc-text-uiAccent/30\"\n\t\t\t\t/>\n\t\t\t\t<span>\n\t\t\t\t\t<span className=\"md:hc-hidden lg:hc-inline\">Calculate your</span> commute\n\t\t\t\t</span>\n\t\t\t</label>\n\n\t\t\t<Combobox value={selected} onChange={handleSelect}>\n\t\t\t\t<div className=\"hc-relative hc-mt-1\">\n\t\t\t\t\t<div className=\"hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none\">\n\t\t\t\t\t\t<Combobox.Input\n\t\t\t\t\t\t\tid=\"commute\"\n\t\t\t\t\t\t\taria-labelledby=\"commute-label\"\n\t\t\t\t\t\t\tclassName=\"hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400\"\n\t\t\t\t\t\t\tonChange={e => {\n\t\t\t\t\t\t\t\tsetCommuteLocation(\"\");\n\t\t\t\t\t\t\t\tsetValue(e.target.value);\n\t\t\t\t\t\t\t\tsetSelected(e.target.value);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={selected}\n\t\t\t\t\t\t\tdisabled={!ready}\n\t\t\t\t\t\t\tplaceholder=\"Starting point\"\n\t\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button.Btn\n\t\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\t\tsize=\"sqsm\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetIsCurrentLocation(!isCurrentLocation);\n\t\t\t\t\t\t\t\tlocalStorage.setItem('isCurrentLocation', !isCurrentLocation);\n\t\t\t\t\t\t\t\tif (isCurrentLocation || commuteLocation) {\n\t\t\t\t\t\t\t\t\tsetCommuteLocation(\"\");\n\t\t\t\t\t\t\t\t\tsetSelected(\"\");\n\t\t\t\t\t\t\t\t} else if (!commuteLocation) { fetchLocation(); }\n\t\t\t\t\t\t\t}}\n\n\t\t\t\t\t\t\tclassName=\"\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"hc-sr-only\">Use your location</span>\n\t\t\t\t\t\t\t{commuteLocation ? <Icon icon=\"mdi:times\"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon=\"mdi:my-location\" />}\n\t\t\t\t\t\t</Button.Btn>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Transition\n\t\t\t\t\t\tas={Fragment}\n\t\t\t\t\t\tleave=\"hc-transition hc-ease-in hc-duration-100\"\n\t\t\t\t\t\tleaveFrom=\"hc-opacity-100\"\n\t\t\t\t\t\tleaveTo=\"hc-opacity-0\"\n\t\t\t\t\t\tafterLeave={clearSuggestions}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Combobox.Options className=\"hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm\">\n\t\t\t\t\t\t\t{status === \"OK\" &&\n\t\t\t\t\t\t\t\tdata.map(data => (\n\t\t\t\t\t\t\t\t\t<Combobox.Option\n\t\t\t\t\t\t\t\t\t\tkey={data.place_id}\n\t\t\t\t\t\t\t\t\t\tvalue={data.description}\n\t\t\t\t\t\t\t\t\t\tclassName={({ active }) =>\n\t\t\t\t\t\t\t\t\t\t\t`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? \"hc-bg-primary hc-text-white\" : \"hc-text-uiText\"\n\t\t\t\t\t\t\t\t\t\t\t}`\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{({ selected }) => (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={`hc-block hc-truncate ${selected ? \"hc-font-bold\" : \"hc-font-medium\"}`}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{data.description}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</Combobox.Option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Combobox.Options>\n\t\t\t\t\t</Transition>\n\t\t\t\t</div>\n\t\t\t</Combobox>\n\t\t</div>\n\t);\n};\n\nexport default FilterCommute;\n"],"names":["FilterCommute","_ref","className","ready","status","data","selected","isCurrentLocation","inputRef","handleSelect","setValue","setSelected","clearSuggestions","commuteLocation","setIsCurrentLocation","fetchLocation","setCommuteLocation","React","createElement","concat","htmlFor","id","Icon","icon","size","Combobox","value","onChange","Input","e","target","disabled","placeholder","ref","Button","Btn","variant","onClick","localStorage","setItem","Transition","as","Fragment","leave","leaveFrom","leaveTo","afterLeave","Options","map","Option","key","place_id","description","_ref2","active","_ref3"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../../src/components/modules/filter/item.js"],"sourcesContent":["import React from 'react';\nimport Icon from '~/components/modules/icon';\n\nconst FilterItem = ({\n\tclassName,\n\titem,\n\ttype,\n\titemKey,\n\thasCount,\n\tfield,\n\tactiveItem,\n\tsetActiveItem,\n\tchangeHandler,\n\tisExternalLink = false,\n\texternalLinkUrl,\n\ttrackEvent,\n\teventTypes,\n\t...rest\n}) => {\n\tconst itemName = item.name ? item.name : item;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n\t\t<label\n\t\t onClick={() =>\n\t\t\t{\n\t\t\t\tif(!isExternalLink) return;\n\t\t\t trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });\n\t\t\t\twindow.location.href = externalLinkUrl;\n\t\t\t}}\n\t\t\tclassName={`\n hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5\n ${className ?? \"\"}\n `}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{isExternalLink ? (\n\t\t\t\t<Icon\n\t\t\t\t\ticon=\"tabler:external-link\"\n\t\t\t\t\tsize=\"hc-size-4\"\n\t\t\t\t\tclassName={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}\n\t\t\t\t></Icon>\n\t\t\t) : (\n\t\t\t\t<input\n\t\t\t\t\tid={itemKey}\n\t\t\t\t\tname={field}\n\t\t\t\t\tdisabled={item.count === 0}\n\t\t\t\t\tvalue={itemName}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tclassName=\"hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm\"\n\t\t\t\t\tchecked={activeItem}\n\t\t\t\t\tonChange={() => {\n\t\t\t\t\t\tsetActiveItem(!activeItem);\n\t\t\t\t\t\tchangeHandler();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<span className=\"hc-text-left hc-font-medium\">{itemName}</span>\n\t\t\t{hasCount && !isExternalLink && (\n\t\t\t\t<span className=\"hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary\">\n ({item.count})\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</label>\n\t);\n};\n\nexport default FilterItem;\n"],"names":["FilterItem","_ref","className","item","type","itemKey","hasCount","field","activeItem","setActiveItem","changeHandler","_ref$isExternalLink","isExternalLink","externalLinkUrl","trackEvent","eventTypes","rest","_objectWithoutProperties","_excluded","itemName","name","React","createElement","_extends","onClick","EXTERNAL_LINK_CLICKED","link","window","location","href","concat","Icon","icon","size","id","disabled","count","value","checked","onChange"],"mappings":";;;;;AAGA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAeV;AAAA,EAAA,IAdLC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,UAAU,GAAAP,IAAA,CAAVO,UAAU;IACVC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;IACbC,aAAa,GAAAT,IAAA,CAAbS,aAAa;IAAAC,mBAAA,GAAAV,IAAA,CACbW,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,mBAAA;IACtBE,eAAe,GAAAZ,IAAA,CAAfY,eAAe;IACfC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,UAAU,GAAAd,IAAA,CAAVc,UAAU;AACPC,IAAAA,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA,CAAA,CAAA;EAEP,IAAMC,QAAQ,GAAGhB,IAAI,CAACiB,IAAI,GAAGjB,IAAI,CAACiB,IAAI,GAAGjB,IAAI,CAAA;AAE7C,EAAA;AAAA;AACC;IACAkB,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,QAAA,CAAA;MACEC,OAAO,EAAE,SAAAA,OAAAA,GACV;QACC,IAAG,CAACZ,cAAc,EAAE,OAAA;AACjBE,QAAAA,UAAU,CAACC,UAAU,CAACU,qBAAqB,EAAE;AAAEC,UAAAA,IAAI,EAAEb,eAAAA;AAAgB,SAAC,CAAC,CAAA;AAC1Ec,QAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGhB,eAAe,CAAA;OACrC;MACFX,SAAS,EAAA,uJAAA,CAAA4B,MAAA,CAEF5B,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAI,EAAE,EAAA,UAAA,CAAA;KAElBc,EAAAA,IAAI,GAEPJ,cAAc,gBACdS,cAAA,CAAAC,aAAA,CAACS,aAAI,EAAA;AACJC,MAAAA,IAAI,EAAC,sBAAsB;AAC3BC,MAAAA,IAAI,EAAC,WAAW;AAChB/B,MAAAA,SAAS,EAAE,0DAAA;AAA2D,KAChE,CAAC,gBAERmB,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACCY,MAAAA,EAAE,EAAE7B,OAAQ;AACZe,MAAAA,IAAI,EAAEb,KAAM;
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../../src/components/modules/filter/item.js"],"sourcesContent":["import React from 'react';\nimport Icon from '~/components/modules/icon';\n\nconst FilterItem = ({\n\tclassName,\n\titem,\n\ttype,\n\titemKey,\n\thasCount,\n\tfield,\n\tactiveItem,\n\tsetActiveItem,\n\tchangeHandler,\n\tisExternalLink = false,\n\texternalLinkUrl,\n\ttrackEvent,\n\teventTypes,\n\t...rest\n}) => {\n\tconst itemName = item.name ? item.name : item;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n\t\t<label\n\t\t onClick={() =>\n\t\t\t{\n\t\t\t\tif(!isExternalLink) return;\n\t\t\t trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });\n\t\t\t\twindow.location.href = externalLinkUrl;\n\t\t\t}}\n\t\t\tclassName={`\n hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5\n ${className ?? \"\"}\n `}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{isExternalLink ? (\n\t\t\t\t<Icon\n\t\t\t\t\ticon=\"tabler:external-link\"\n\t\t\t\t\tsize=\"hc-size-4\"\n\t\t\t\t\tclassName={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}\n\t\t\t\t></Icon>\n\t\t\t) : (\n\t\t\t\t<input\n\t\t\t\t\tid={itemKey}\n\t\t\t\t\tname={field}\n\t\t\t\t\taria-label={itemName}\n\t\t\t\t\tdisabled={item.count === 0}\n\t\t\t\t\tvalue={itemName}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tclassName=\"hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm\"\n\t\t\t\t\tchecked={activeItem}\n\t\t\t\t\tonChange={() => {\n\t\t\t\t\t\tsetActiveItem(!activeItem);\n\t\t\t\t\t\tchangeHandler();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<span className=\"hc-text-left hc-font-medium\">{itemName}</span>\n\t\t\t{hasCount && !isExternalLink && (\n\t\t\t\t<span className=\"hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary\">\n ({item.count})\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</label>\n\t);\n};\n\nexport default FilterItem;\n"],"names":["FilterItem","_ref","className","item","type","itemKey","hasCount","field","activeItem","setActiveItem","changeHandler","_ref$isExternalLink","isExternalLink","externalLinkUrl","trackEvent","eventTypes","rest","_objectWithoutProperties","_excluded","itemName","name","React","createElement","_extends","onClick","EXTERNAL_LINK_CLICKED","link","window","location","href","concat","Icon","icon","size","id","disabled","count","value","checked","onChange"],"mappings":";;;;;AAGA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAeV;AAAA,EAAA,IAdLC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,UAAU,GAAAP,IAAA,CAAVO,UAAU;IACVC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;IACbC,aAAa,GAAAT,IAAA,CAAbS,aAAa;IAAAC,mBAAA,GAAAV,IAAA,CACbW,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,mBAAA;IACtBE,eAAe,GAAAZ,IAAA,CAAfY,eAAe;IACfC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,UAAU,GAAAd,IAAA,CAAVc,UAAU;AACPC,IAAAA,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA,CAAA,CAAA;EAEP,IAAMC,QAAQ,GAAGhB,IAAI,CAACiB,IAAI,GAAGjB,IAAI,CAACiB,IAAI,GAAGjB,IAAI,CAAA;AAE7C,EAAA;AAAA;AACC;IACAkB,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAAC,QAAA,CAAA;MACEC,OAAO,EAAE,SAAAA,OAAAA,GACV;QACC,IAAG,CAACZ,cAAc,EAAE,OAAA;AACjBE,QAAAA,UAAU,CAACC,UAAU,CAACU,qBAAqB,EAAE;AAAEC,UAAAA,IAAI,EAAEb,eAAAA;AAAgB,SAAC,CAAC,CAAA;AAC1Ec,QAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGhB,eAAe,CAAA;OACrC;MACFX,SAAS,EAAA,uJAAA,CAAA4B,MAAA,CAEF5B,SAAS,aAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAI,EAAE,EAAA,UAAA,CAAA;KAElBc,EAAAA,IAAI,GAEPJ,cAAc,gBACdS,cAAA,CAAAC,aAAA,CAACS,aAAI,EAAA;AACJC,MAAAA,IAAI,EAAC,sBAAsB;AAC3BC,MAAAA,IAAI,EAAC,WAAW;AAChB/B,MAAAA,SAAS,EAAE,0DAAA;AAA2D,KAChE,CAAC,gBAERmB,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACCY,MAAAA,EAAE,EAAE7B,OAAQ;AACZe,MAAAA,IAAI,EAAEb,KAAM;AACZ,MAAA,YAAA,EAAYY,QAAS;AACrBgB,MAAAA,QAAQ,EAAEhC,IAAI,CAACiC,KAAK,KAAK,CAAE;AAC3BC,MAAAA,KAAK,EAAElB,QAAS;AAChBf,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAC,6FAA6F;AACvGoC,MAAAA,OAAO,EAAE9B,UAAW;MACpB+B,QAAQ,EAAE,SAAAA,QAAAA,GAAM;QACf9B,aAAa,CAAC,CAACD,UAAU,CAAC,CAAA;AAC1BE,QAAAA,aAAa,EAAE,CAAA;AAChB,OAAA;AAAE,KACF,CACD,eAEDW,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMpB,MAAAA,SAAS,EAAC,6BAAA;KAA+BiB,EAAAA,QAAe,CAAC,EAC9Db,QAAQ,IAAI,CAACM,cAAc,iBAC3BS,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMpB,MAAAA,SAAS,EAAC,+EAAA;AAA+E,KAAA,EAAC,GACzF,EAACC,IAAI,CAACiC,KAAK,EAAC,GACb,CAED,CAAA;AAAC,IAAA;AAEV;;;;"}
|
|
@@ -15,13 +15,15 @@ var Search = function Search(_ref) {
|
|
|
15
15
|
label = _ref.label;
|
|
16
16
|
var inputRef = useRef(null);
|
|
17
17
|
var buttonRef = useRef(null);
|
|
18
|
+
var inputId = 'hc-search-input';
|
|
18
19
|
return /*#__PURE__*/React__default.createElement(CardFilter, {
|
|
19
20
|
as: "form",
|
|
20
21
|
className: className !== null && className !== void 0 ? className : ""
|
|
21
22
|
}, /*#__PURE__*/React__default.createElement(CardFilter.Title, {
|
|
22
23
|
as: "label",
|
|
23
24
|
icon: "fluent:search-12-filled",
|
|
24
|
-
className: labelClassName !== null && labelClassName !== void 0 ? labelClassName : ""
|
|
25
|
+
className: labelClassName !== null && labelClassName !== void 0 ? labelClassName : "",
|
|
26
|
+
htmlFor: inputId
|
|
25
27
|
}, /*#__PURE__*/React__default.createElement("span", null, label)), /*#__PURE__*/React__default.createElement("div", {
|
|
26
28
|
className: "hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent"
|
|
27
29
|
}, showSearchIcon && /*#__PURE__*/React__default.createElement(IconContained, {
|
|
@@ -29,8 +31,10 @@ var Search = function Search(_ref) {
|
|
|
29
31
|
size: "hc-size-4",
|
|
30
32
|
className: "hc-mr-2 hc-text-uiAccent/50"
|
|
31
33
|
}), /*#__PURE__*/React__default.createElement("input", {
|
|
34
|
+
id: inputId,
|
|
32
35
|
type: "text",
|
|
33
36
|
name: "search",
|
|
37
|
+
"aria-label": label,
|
|
34
38
|
ref: inputRef,
|
|
35
39
|
onKeyDown: function onKeyDown(e) {
|
|
36
40
|
if (e.key === 'Enter') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.js","sources":["../../../../src/components/modules/filter/search.js"],"sourcesContent":["import React, { useRef } from 'react';\nimport Button from '~/components/modules/buttons/default';\nimport Icon from '~/components/modules/icon';\nimport FilterCard from '~/components/modules/cards/filter';\n\nconst Search = ({\n\tinputPlaceholder,\n\tshowSearchIcon,\n\tclassName,\n\tlabelClassName,\n\tinputValue,\n\thandleInputChange,\n\thandleSubmitInput,\n\thandleReset,\n\tlabel\n}) => {\n\tconst inputRef = useRef(null);\n\tconst buttonRef = useRef(null);\n\n\treturn (\n\t\t<FilterCard as=\"form\" className={className ?? \"\"}>\n\t\t\t<FilterCard.Title\n\t\t\t\tas=\"label\"\n\t\t\t\ticon=\"fluent:search-12-filled\"\n\t\t\t\tclassName={labelClassName ?? \"\"}\n\t\t\t>\n\t\t\t\t<span>{label}</span>\n\t\t\t</FilterCard.Title>\n\n\t\t\t<div className=\"hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent\">\n\t\t\t\t{showSearchIcon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon=\"fluent:search-12-filled\"\n\t\t\t\t\t\tsize=\"hc-size-4\"\n\t\t\t\t\t\tclassName=\"hc-mr-2 hc-text-uiAccent/50\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tname=\"search\"\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonKeyDown={e => {\n\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tbuttonRef.current.click(); // Trigger the hidden button on Enter key press\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tplaceholder={inputPlaceholder}\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tclassName=\"hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none\"\n\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t/>\n\n\t\t\t\t<button\n\t\t\t\t id=\"SearchButton\"\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"hidden hc-invisible\"\n\t\t\t\t\tonClick={() => handleSubmitInput(inputRef.current.value)}\n\t\t\t\t>\n Hidden Submit\n\t\t\t\t</button>\n\n\t\t\t\t<Button.Btn\n\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\tsize=\"sqsm\"\n\t\t\t\t\tclassName={`transition-opacity ${inputValue ? \"hc-opacity-100\" : \"hc-opacity-0 hc-pointer-events-none\"}`}\n\t\t\t\t\tonClick={handleReset}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"hc-sr-only\">Clear</span>\n\t\t\t\t\t<Button.Icon icon=\"uil:times\" className=\"hc-text-uiAccent\" />\n\t\t\t\t</Button.Btn>\n\t\t\t</div>\n\t\t</FilterCard>\n\t);\n};\n\nexport default Search;\n"],"names":["Search","_ref","inputPlaceholder","showSearchIcon","className","labelClassName","inputValue","handleInputChange","handleSubmitInput","handleReset","label","inputRef","useRef","buttonRef","React","createElement","FilterCard","as","Title","icon","Icon","size","type","name","ref","onKeyDown","e","key","preventDefault","current","click","placeholder","value","onChange","
|
|
1
|
+
{"version":3,"file":"search.js","sources":["../../../../src/components/modules/filter/search.js"],"sourcesContent":["import React, { useRef } from 'react';\nimport Button from '~/components/modules/buttons/default';\nimport Icon from '~/components/modules/icon';\nimport FilterCard from '~/components/modules/cards/filter';\n\nconst Search = ({\n\tinputPlaceholder,\n\tshowSearchIcon,\n\tclassName,\n\tlabelClassName,\n\tinputValue,\n\thandleInputChange,\n\thandleSubmitInput,\n\thandleReset,\n\tlabel\n}) => {\n\tconst inputRef = useRef(null);\n\tconst buttonRef = useRef(null);\n\tconst inputId = 'hc-search-input';\n\n\treturn (\n\t\t<FilterCard as=\"form\" className={className ?? \"\"}>\n\t\t\t<FilterCard.Title\n\t\t\t\tas=\"label\"\n\t\t\t\ticon=\"fluent:search-12-filled\"\n\t\t\t\tclassName={labelClassName ?? \"\"}\n\t\t\t\thtmlFor={inputId}\n\t\t\t>\n\t\t\t\t<span>{label}</span>\n\t\t\t</FilterCard.Title>\n\n\t\t\t<div className=\"hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent\">\n\t\t\t\t{showSearchIcon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon=\"fluent:search-12-filled\"\n\t\t\t\t\t\tsize=\"hc-size-4\"\n\t\t\t\t\t\tclassName=\"hc-mr-2 hc-text-uiAccent/50\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\tid={inputId}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tname=\"search\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonKeyDown={e => {\n\t\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tbuttonRef.current.click(); // Trigger the hidden button on Enter key press\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tplaceholder={inputPlaceholder}\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tclassName=\"hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none\"\n\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t/>\n\n\t\t\t\t<button\n\t\t\t\t id=\"SearchButton\"\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"hidden hc-invisible\"\n\t\t\t\t\tonClick={() => handleSubmitInput(inputRef.current.value)}\n\t\t\t\t>\n Hidden Submit\n\t\t\t\t</button>\n\n\t\t\t\t<Button.Btn\n\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\tsize=\"sqsm\"\n\t\t\t\t\tclassName={`transition-opacity ${inputValue ? \"hc-opacity-100\" : \"hc-opacity-0 hc-pointer-events-none\"}`}\n\t\t\t\t\tonClick={handleReset}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"hc-sr-only\">Clear</span>\n\t\t\t\t\t<Button.Icon icon=\"uil:times\" className=\"hc-text-uiAccent\" />\n\t\t\t\t</Button.Btn>\n\t\t\t</div>\n\t\t</FilterCard>\n\t);\n};\n\nexport default Search;\n"],"names":["Search","_ref","inputPlaceholder","showSearchIcon","className","labelClassName","inputValue","handleInputChange","handleSubmitInput","handleReset","label","inputRef","useRef","buttonRef","inputId","React","createElement","FilterCard","as","Title","icon","htmlFor","Icon","size","id","type","name","ref","onKeyDown","e","key","preventDefault","current","click","placeholder","value","onChange","onClick","Button","Btn","variant","concat"],"mappings":"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"}
|
|
@@ -30,7 +30,7 @@ const ItemsList = ({ fieldNames, showMap, fieldsShown, filteredListings, loading
|
|
|
30
30
|
}, [scrollContainerRef]);
|
|
31
31
|
return (React__default.createElement("div", { className: "hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col hc-h-[100%]" },
|
|
32
32
|
React__default.createElement("div", { className: "hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20" },
|
|
33
|
-
React__default.createElement("
|
|
33
|
+
React__default.createElement("p", { role: "status", "aria-live": "polite", className: "hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm" },
|
|
34
34
|
loading && React__default.createElement("span", null, "Loading..."),
|
|
35
35
|
!loading && React__default.createElement("span", null,
|
|
36
36
|
filteredListings.length,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-list.js","sources":["../../../../src/components/modules/list/item-list.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, RefObject, ReactNode } from 'react';\nimport Header from '~/components/modules/list/header';\nimport Sort from '~/components/modules/filter/sort';\nimport Loading from \"~/util/loading\";\nimport { Listing } from '~/types/Listings';\n\ninterface ItemsListProps {\n fieldNames: Record<string, string>;\n showMap: boolean;\n fieldsShown: string[];\n filteredListings: Listing[];\n loading: boolean;\n sortSetting: any;\n setSortSetting: (setting: any) => void;\n itemLimit: number;\n loader: RefObject<HTMLDivElement>;\n scrollContainerRef: RefObject<HTMLDivElement>;\n itemRefs: any;\n selectedListItem: Listing | null;\n children: ReactNode;\n includeFavorite: boolean;\n}\n\nconst ItemsList: React.FC<ItemsListProps> = ({\n fieldNames,\n showMap,\n fieldsShown,\n filteredListings,\n loading,\n sortSetting,\n setSortSetting,\n itemLimit,\n loader,\n scrollContainerRef,\n includeFavorite = false,\n children\n}) => {\n const [scrollbarWidth, setScrollbarWidth] = useState<number>(0);\n\n const checkScrollbar = () => {\n if (scrollContainerRef.current) {\n const { scrollHeight, clientHeight, offsetWidth, clientWidth } = scrollContainerRef.current;\n const hasVerticalScrollbar = scrollHeight > clientHeight;\n const newScrollbarWidth = hasVerticalScrollbar ? offsetWidth - clientWidth : 0;\n setScrollbarWidth(newScrollbarWidth);\n }\n };\n\n useEffect(() => {\n checkScrollbar();\n\n const resizeObserver = new ResizeObserver(() => checkScrollbar());\n const mutationObserver = new MutationObserver(() => checkScrollbar());\n\n if (scrollContainerRef.current) {\n resizeObserver.observe(scrollContainerRef.current);\n mutationObserver.observe(scrollContainerRef.current, { childList: true, subtree: true, attributes: true });\n }\n\n return () => {\n if (scrollContainerRef.current) {\n resizeObserver.unobserve(scrollContainerRef.current);\n mutationObserver.disconnect();\n }\n };\n }, [scrollContainerRef]);\n\n
|
|
1
|
+
{"version":3,"file":"item-list.js","sources":["../../../../src/components/modules/list/item-list.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, RefObject, ReactNode } from 'react';\nimport Header from '~/components/modules/list/header';\nimport Sort from '~/components/modules/filter/sort';\nimport Loading from \"~/util/loading\";\nimport { Listing } from '~/types/Listings';\n\ninterface ItemsListProps {\n fieldNames: Record<string, string>;\n showMap: boolean;\n fieldsShown: string[];\n filteredListings: Listing[];\n loading: boolean;\n sortSetting: any;\n setSortSetting: (setting: any) => void;\n itemLimit: number;\n loader: RefObject<HTMLDivElement>;\n scrollContainerRef: RefObject<HTMLDivElement>;\n itemRefs: any;\n selectedListItem: Listing | null;\n children: ReactNode;\n includeFavorite: boolean;\n}\n\nconst ItemsList: React.FC<ItemsListProps> = ({\n fieldNames,\n showMap,\n fieldsShown,\n filteredListings,\n loading,\n sortSetting,\n setSortSetting,\n itemLimit,\n loader,\n scrollContainerRef,\n includeFavorite = false,\n children\n}) => {\n const [scrollbarWidth, setScrollbarWidth] = useState<number>(0);\n\n const checkScrollbar = () => {\n if (scrollContainerRef.current) {\n const { scrollHeight, clientHeight, offsetWidth, clientWidth } = scrollContainerRef.current;\n const hasVerticalScrollbar = scrollHeight > clientHeight;\n const newScrollbarWidth = hasVerticalScrollbar ? offsetWidth - clientWidth : 0;\n setScrollbarWidth(newScrollbarWidth);\n }\n };\n\n useEffect(() => {\n checkScrollbar();\n\n const resizeObserver = new ResizeObserver(() => checkScrollbar());\n const mutationObserver = new MutationObserver(() => checkScrollbar());\n\n if (scrollContainerRef.current) {\n resizeObserver.observe(scrollContainerRef.current);\n mutationObserver.observe(scrollContainerRef.current, { childList: true, subtree: true, attributes: true });\n }\n\n return () => {\n if (scrollContainerRef.current) {\n resizeObserver.unobserve(scrollContainerRef.current);\n mutationObserver.disconnect();\n }\n };\n }, [scrollContainerRef]);\n\n\treturn (\n <div className=\"hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col hc-h-[100%]\">\n <div className=\"hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20\">\n <p\n role=\"status\"\n aria-live=\"polite\"\n className=\"hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm\"\n >\n {loading && <span>Loading...</span>}\n {!loading && <span>{filteredListings.length} results</span>}\n </p>\n <div className=\"hc-block md:hc-hidden\">\n <Sort\n className={''}\n fields={fieldsShown}\n setSortSetting={setSortSetting}\n fieldNames={fieldNames}\n />\n </div>\n </div>\n <div>\n <Header\n className={''}\n setSortSetting={setSortSetting}\n sortSetting={sortSetting}\n fieldsShown={fieldsShown}\n fieldNames={fieldNames}\n includeFavorite={includeFavorite}\n scrollbarWidth={scrollbarWidth}\n />\n </div>\n <div\n ref={scrollContainerRef}\n className={`\n hc-flex-grow hc-overflow-y-auto\n ${showMap ? \" hc-max-h-[88%] md:hc-max-[100%]\" : \"md:hc-max-h-[95%] hc-max-h-[95%]\"}\n `}\n >\n {loading ? (\n <div className=\"hc-flex hc-justify-center hc-items-center hc-pt-20\">\n <Loading />\n </div>\n ) : (\n children\n )}\n {filteredListings.length >= itemLimit &&<div ref={loader} style={{ height: \"100px\", textAlign: \"center\" }}> <Loading /></div>}\n </div>\n </div>\n );\n};\n\nexport default ItemsList;\n"],"names":["React","Sort","Header"],"mappings":";;;;;AAuBA,MAAM,SAAS,GAA6B,CAAC,EAC3C,UAAU,EACV,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,cAAc,EACd,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,eAAe,GAAG,KAAK,EACvB,QAAQ,EACT,KAAI;IACH,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,kBAAkB,CAAC,OAAO,EAAE;AAC9B,YAAA,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC,OAAO,CAAC;AAC5F,YAAA,MAAM,oBAAoB,GAAG,YAAY,GAAG,YAAY,CAAC;AACzD,YAAA,MAAM,iBAAiB,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;YAC/E,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AACtC,SAAA;AACH,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,cAAc,EAAE,CAAC;QAEjB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,cAAc,EAAE,CAAC,CAAC;QAClE,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,cAAc,EAAE,CAAC,CAAC;QAEtE,IAAI,kBAAkB,CAAC,OAAO,EAAE;AAC9B,YAAA,cAAc,CAAC,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;YACnD,gBAAgB,CAAC,OAAO,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC5G,SAAA;AAED,QAAA,OAAO,MAAK;YACV,IAAI,kBAAkB,CAAC,OAAO,EAAE;AAC9B,gBAAA,cAAc,CAAC,SAAS,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;gBACrD,gBAAgB,CAAC,UAAU,EAAE,CAAC;AAC/B,aAAA;AACH,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAE1B,IAAA,QACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oEAAoE,EAAA;QACjFA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yLAAyL,EAAA;YACtMA,cACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAClB,SAAS,EAAC,4DAA4D,EAAA;AAErE,gBAAA,OAAO,IAAIA,cAAuB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,YAAA,CAAA;AAClC,gBAAA,CAAC,OAAO,IAAIA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AAAO,oBAAA,gBAAgB,CAAC,MAAM;+BAAgB,CACzD;YACJA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,gBAAAA,cAAA,CAAA,aAAA,CAACC,UAAI,EACH,EAAA,SAAS,EAAE,EAAE,EACb,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EAAA,CACtB,CACE,CACF;AACN,QAAAD,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAACE,UAAM,EAAA,EACL,SAAS,EAAE,EAAE,EACb,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,GAC9B,CACE;AACN,QAAAF,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,CAAA;;AAEP,UAAA,EAAA,OAAO,GAAG,kCAAkC,GAAG,kCAAkC,CAAA;AACpF,QAAA,CAAA,EAAA;AAEA,YAAA,OAAO,IACNA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oDAAoD,EAAA;gBACjEA,cAAC,CAAA,aAAA,CAAA,OAAO,OAAG,CACP,KAEN,QAAQ,CACT;YACE,gBAAgB,CAAC,MAAM,IAAI,SAAS,IAAGA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAA;;AAAG,gBAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA,CAAM,CAC3H,CACF,EACN;AACJ;;;;"}
|
package/package.json
CHANGED
|
@@ -25,6 +25,7 @@ const FilterCommute = ({
|
|
|
25
25
|
<div className={`relative ${className ?? ""}`}>
|
|
26
26
|
<label
|
|
27
27
|
htmlFor="commute"
|
|
28
|
+
id="commute-label"
|
|
28
29
|
className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
|
|
29
30
|
>
|
|
30
31
|
<Icon
|
|
@@ -41,6 +42,8 @@ const FilterCommute = ({
|
|
|
41
42
|
<div className="hc-relative hc-mt-1">
|
|
42
43
|
<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
|
|
43
44
|
<Combobox.Input
|
|
45
|
+
id="commute"
|
|
46
|
+
aria-labelledby="commute-label"
|
|
44
47
|
className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
|
|
45
48
|
onChange={e => {
|
|
46
49
|
setCommuteLocation("");
|
|
@@ -16,6 +16,7 @@ const Search = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
const inputRef = useRef(null);
|
|
18
18
|
const buttonRef = useRef(null);
|
|
19
|
+
const inputId = 'hc-search-input';
|
|
19
20
|
|
|
20
21
|
return (
|
|
21
22
|
<FilterCard as="form" className={className ?? ""}>
|
|
@@ -23,6 +24,7 @@ const Search = ({
|
|
|
23
24
|
as="label"
|
|
24
25
|
icon="fluent:search-12-filled"
|
|
25
26
|
className={labelClassName ?? ""}
|
|
27
|
+
htmlFor={inputId}
|
|
26
28
|
>
|
|
27
29
|
<span>{label}</span>
|
|
28
30
|
</FilterCard.Title>
|
|
@@ -36,8 +38,10 @@ const Search = ({
|
|
|
36
38
|
/>
|
|
37
39
|
)}
|
|
38
40
|
<input
|
|
41
|
+
id={inputId}
|
|
39
42
|
type="text"
|
|
40
43
|
name="search"
|
|
44
|
+
aria-label={label}
|
|
41
45
|
ref={inputRef}
|
|
42
46
|
onKeyDown={e => {
|
|
43
47
|
if (e.key === 'Enter') {
|
|
@@ -65,13 +65,17 @@ const ItemsList: React.FC<ItemsListProps> = ({
|
|
|
65
65
|
};
|
|
66
66
|
}, [scrollContainerRef]);
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
return (
|
|
69
69
|
<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col hc-h-[100%]">
|
|
70
70
|
<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
|
|
71
|
-
<
|
|
71
|
+
<p
|
|
72
|
+
role="status"
|
|
73
|
+
aria-live="polite"
|
|
74
|
+
className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm"
|
|
75
|
+
>
|
|
72
76
|
{loading && <span>Loading...</span>}
|
|
73
77
|
{!loading && <span>{filteredListings.length} results</span>}
|
|
74
|
-
</
|
|
78
|
+
</p>
|
|
75
79
|
<div className="hc-block md:hc-hidden">
|
|
76
80
|
<Sort
|
|
77
81
|
className={''}
|